Id Selector, and the Absolute Positioning with Z-index

Declaring id selectors is another style in CSS. It's possible to have an element in a page that has an id, and then declare a selector as #elementId to use the element's style. The z-index property allows absolute positioning to control for example whether to put a text in the foreground/background of the picture. An example demonstrating this concept and other CSS are illustrated here:

New Advances in Physics

css integrates with html

This paper gives the solution to three previously unsolved problems: turning lead into gold, antigravity, and a practical perpetual motion machine.

Turning Gold into Lead

In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a practical technique for transmutation! For more details, please see our transmutation thesis

===========================================================
The code is here to try out. Note that if you want picture to appear,
you need to mention its location. You can also change different values of the z-index.
=========================================================== 

		<html> 

			<head> 

			<title> Additional Styles </title> 

			<style type="text/css"> 

				.abstract {margin-right: 0.5in;
					font-style: italic;             
					text-decoration: line-through;            
					vertical-align: middle;
					text-align: center;
					text-indent: +20 px;
					line-height: 1.5} 
				BODY {background-color: yellow }
				H1 {text-align: left;
					font-family: times new roman;
					color: red }
				img {position:absolute;
					left:0px;
					top:0px;
					z-index:-1;
					}
				#lol {font-family: arial black;
					font-weight:bolder;
					font-style:italic;
					font-size:xx-large}
				H2 {font-family: MeppDisplayShadow}
				STRONG {text-decoration: underline }
				.blue { color: blue; font-weight: bold }
			</style> 

		</head> 

	<body> 

		<H1>New Advances in Physics</H1> 

		<img src="..\Pictures/nasa.png"   width="450"   height="150" >

		<p id="lol"> css integrates with html </p> 

		<p CLASS="abstract"> 

		This paper gives the solution to three previously
		unsolved problems: turning lead into gold, 
		antigravity, and a practical perpetual motion machine.
	
		< H2 CLASS="abstract"> Turning Gold into Lead </H2> 

		<span class="blue"> 

		In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a practical technique for 
		transmutation! For more details, please see <u> our transmutation thesis</u> </span> 

	</body> 

	</html>
============================================================================================================


For more details, please contact me here.
Date of last modification: 2020.